<template>
  <MsTable
    v-model:page="page"
    v-model:page-size="size"
    :total="total"
    :loading="loading"
    :columns="columns"
    :data-source="dataSource"
    @reload="handleGetTable"
  >
    <template #search>
      <a-form layout="inline" :model="searchForm">
        <a-form-item>
          <a-input v-model:value="searchForm.blurry" placeholder="输入名称或者描述搜索" />
        </a-form-item>
        <a-form-item class="search-btn">
          <a-button @click="handleResetTable">重置</a-button>
          <a-button type="primary" :loading="loading" @click="handleSearchTable">查询</a-button>
        </a-form-item>
      </a-form>
    </template>
    <template #tools>
      <a-button type="primary" @click="handleOpenModal()">新增</a-button>
    </template>
    <template #action="{ record }">
      <MsActions @delete="handleDelData(record.id)" @edit="handleOpenModal(record)" />
    </template>
    <template>
      <a-modal
        v-model:visible="modal"
        :title="modalTitle"
        :confirm-loading="submitLoading"
        @ok="submitForm"
      >
        <a-form
          :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"
          @submit="submitForm"
        >
          <a-form-item label="用户名" v-bind="validateInfos.name">
            <a-input v-model:value="formModel.name" />
          </a-form-item>
        </a-form>
      </a-modal>
    </template>
  </MsTable>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { createColumn } from '@/components/base/Table/type'
import useTable from '@/components/base/Table/useTable'
import useForm from '@/hooks/useForm'

export default defineComponent({
  name: 'Role',
  setup () {
    const columns = [
      createColumn('name', '角色名称'),
      createColumn('dataScope', '数据权限'),
      createColumn('level', '角色级别'),
      createColumn('description', '描述'),
      createColumn('createTime', '创建时间'),
      createColumn('action', '操作', true)
    ]

    const ruleForm = reactive({
      name: [
        { required: true, message: '请输入角色名称' }
      ]
    })

    const {
      handleOpenModal, modal,
      submitLoading, submitForm, validateInfos, formModel, modalTitle
    } = useForm<{ name: string, dataScope?: string }>('/api/roles', ruleForm)

    return {
      modalTitle,
      formModel,
      validateInfos,
      handleOpenModal,
      modal,
      columns,
      submitLoading,
      submitForm,
      ...useTable<{ name: string, dataScope: string }, { blurry: string }>('/api/roles')
    }
  }
})
</script>
